<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学科信息</title>
    <style>
        #container {
            width: 80%;
            margin: 10px auto;
        }
        #container[v-cloak] {
            display: none;
        }
        #main dt {
            font-size: 1.5em;
        }
        #main dd {
            font-size: 1.2em;
        }
        #main a {
            text-decoration: none;
            color: blue;
        }
        .nav {
            float: right;
            margin-right: 50px;
        }
    </style>
</head>
<body>
    <div id="container" v-cloak>
        <div class="nav">
            <span v-if="hasLogin">
                {{ username }}&nbsp;&nbsp;
                <a href="" @click.prevent="logout()">注销</a>
            </span>
            <span v-if="!hasLogin">
                <a href="login.html">请登录</a>
            </span>
        </div>
        <h1>千锋教育成都校区所有学科</h1>
        <hr>
        <div id="main">
            <dl v-for="subject in subjects">
                <dt>
                    <a :href="'teachers.html?sno=' + subject.no">{{ subject.name }}</a>
                    <img v-if="subject.is_hot" src="/static/images/hot-icon-small.png">
                </dt>
                <dd>{{ subject.intro }}</dd>
            </dl>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script>
        let app = new Vue({
            el: '#container',
            data: {
                subjects: [],
                hasLogin: false,
                username: ''
            },
            created() {
                this.hasLogin = !!localStorage.token
                if (this.hasLogin) {
                    this.username = localStorage.username
                }
                fetch('/subjects/')
                    .then(resp => resp.json())
                    .then(json => this.subjects = json)
            },
            methods: {
                logout() {
                    delete localStorage.username
                    delete localStorage.token
                    location.href = '/logout/'
                }
            }
        })
    </script>
</body>
</html>